<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>朋友圈</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
    <script src="../assets/js/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<script>
    var page={
        "page_num": '1',
        "page_size": '3'
    };
    $(function(){
        //获取所有朋友圈
        $.ajax({
            type: 'POST',
            url: 'http://127.0.0.1:9001/push/v1.0/Circle/page',
            data: JSON.stringify(page) ,
            contentType:'application/json',
            success: function (data) {
                //注册vue
                new Vue({
                    el:"#list",
                    data:{
                        userinfos:data.data_list
                    },
                    methods:{
                        timestampToTime:function(timestamp){ //时间戳转化成时间
                            var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                            Y = date.getFullYear() + '-';
                            M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                            D = date.getDate() + ' ';
                            h = date.getHours() + ':';
                            m = date.getMinutes() + ':';
                            s = date.getSeconds();
                            return Y+M+D+h+m+s;
                        }
                    }

                })
            }
        });
    })


</script>
<body class="bg-gray">
<header data-am-widget="header" class="am-header am-header-default am-header-fixed ">

    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)" class="widht-10s">
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        朋友圈
    </h1>


</header>
<section class="" id="amz-main" data-tag="css-nav">
    <div id="list">
        <ul v-for="userinfo in userinfos">
            <li >
                <div class="po-avt-wrap">
                    <img class="po-avt data-avt" src="../assets/images/uploads/pyq_03.png">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name friend-mar0"><span class="data-name">{{userinfo.employee_name}}</span></p>
                        <div class="post">
                            <p class="friend-mar0">{{userinfo.content}}</p>
                            <p class="friend-mar0" v-for="imgurl in userinfo.circle_imgs">
                                <img class="list-img" v-bind:src="imgurl" style="height: 100px;">
                            </p>
                        </div>
                        <p class="time friend-mar0">{{timestampToTime(userinfo.modify_time)}}<span class="am-padding-left-xl am-color-blue">删除</span></p><img
                            class="c-icon" src="../assets/images/icons/c.png">
                    </div>
                    <div class="r"></div>
                    <div class="cmt-wrap">

                        <div class="like" v-for="zan in userinfo.circle_zan_logs">
                            <img src="../assets/images/icons/l.png">
                            <a>{{zan.user_name}}</a>
                        </div>
                        <div class="cmt-list" v-for="cmt in userinfo.circle_comment_logs">
                            <!--            <p class="friend-mar0">
                                <span class="data-name">某某科技~贾素杰</span>
                                回复
                                <span>
										王思聪
									</span>
                                <span>

										：
									</span>
                                澳洲大堡礁，这边刚好是夏季，挺适合避寒的。
                            </p>-->
                            <p class="friend-mar0"><span>{{cmt.user_name}} : </span>{{cmt.content}}</p>
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>

</section>

<footer data-am-widget="navbar" class="am-navbar am-cf am-navbar-default ">
    <ul class="am-navbar-nav am-cf am-avg-sm-4">
        <li>
            <a href="../名片/名片.html" class="">
                <img src="../assets/images/icons/mp.png"
                     alt="首页"/>
                <span class="am-navbar-label">名片</span>
            </a>
        </li>
        <li>
            <a href="朋友圈.html" class="selected">
                <img src="../assets/images/icons/friend_on.png"
                     alt="商品"/>
                <span class="am-navbar-label">朋友圈</span>
            </a>
        </li>

        <li>
            <a href="../我的产品/我的产品.html" class="">
                <img src="../assets/images/icons/product.png"
                     alt="产品"/>
                <span class="am-navbar-label">产品</span>
            </a>
        </li>
        <li>
            <a href="31.html" class="">
                <img src="../assets/images/icons/company.png"
                     alt="个人中心"/>
                <span class="am-navbar-label">公司</span>
            </a>
        </li>
    </ul>
</footer>


<script src="../assets/js/amazeui.min.js"></script>

</body>
</html>